<template>
  <div class="index-drawer-box">
    <!--抽屉头部-->
    <div class="drawer-top-bar">
      <img class="bar-image cursor" :src="!open?inOpen:inClose" @click="openD">
      <div style="color: rgb(38, 57, 72);font-size: 1.125rem;margin-left: 10px">{{ title }}</div>
      <div class="cursor" style="color: rgb(38, 57, 72);font-size: 0.75rem;margin-left: 10px;position: absolute;top: 10px;right: 0px" @click="more">更多</div>
    </div>
    <!--抽屉内容，点击标题中的图标可以收起-->
    <div v-show="open" class="drawer-content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: String
  },
  data() {
    return {
      open: true,
      inOpen: require("../assets/more-line.png"),
      inClose: require("../assets/down-point.png")
    }
  },
  name: "index-drawer",
  methods: {
    openD() {
      this.open = !this.open
    },
    more(){

    }
  }
}
</script>

<style scoped>
.drawer-top-bar {
  display: flex;
  flex-direction: row;
  align-items: end;

  height: 40px;
  border-bottom: 2px rgb(50, 73, 93) solid;
  margin: 20px;
  position: relative;
}

.drawer-content {
  margin: 0 20px 5px 20px;
}

.bar-image {
  height: 20px;
  width: auto;
  margin-left: 20px;
  position: relative;
  bottom: -7px;
}
</style>